<template>
    <div>
        <!-- 用户管理 -->
        <el-card style="height: 2500px" class="card">
            <div slot="header">
                <span>用户管理</span>
            </div>
            <!-- 查询功能 -->
            <el-form :inline="true" :model="searchModel">
                
                    
                        <el-form-item label="公司名称：">
                            <el-cascader
                                ref="cascaderAddr"
                                placeholder="搜索或选择公司名称"
                                :options="options"
                                :props="{ expandTrigger: 'hover', label: 'companyname', value: 'companycode' }"
                                @change="handleAreaChange"
                                :show-all-levels="false"
                                filterable
                            ></el-cascader>
                        </el-form-item>
                    

                    
                        <el-form-item label="姓名：">
                            <el-input v-model="searchModel.name" placeholder="请输入姓名" maxlength="20"></el-input>
                        </el-form-item>
                   
                    <el-button type="primary" @click="FindUser" icon="el-icon-search">查询</el-button>
                    <el-button type="success" @click="CreatButton" icon="el-icon-circle-plus-outline">创建用户</el-button>
               
            </el-form>
            <!-- 表格展示 -->
            <el-table border style="width: 100%" :data="tableData">
                <el-table-column type="index" label="序号" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{ (pages.page - 1) * pages.size + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="companyname" label="公司名称" align="center"> </el-table-column>
                <!-- <el-table-column prop="x2" label="部门名称" align="center"> </el-table-column> -->
                <el-table-column prop="name" label="姓名" width="100" align="center"> </el-table-column>
                <el-table-column prop="username" label="用户名" align="center"> </el-table-column>
                <!-- <el-table-column prop="x5" label="性别" width="70" align="center"> </el-table-column>
                <el-table-column prop="x6" label="民族" width="70" align="center"> </el-table-column>
                <el-table-column prop="x7" label="电话" align="center"> </el-table-column> -->
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button type="success" v-if="scope.row.username == ''" @click="registerButton(scope.row)" icon="el-icon-user"
                            >注册</el-button
                        >
                        <el-button type="danger" v-else @click="LogoutUser(scope.row)" icon="el-icon-user">注销</el-button>

                        <el-button type="primary" @click="EditButton(scope.row)" icon="el-icon-edit">编辑</el-button>
                        <el-button type="danger" @click="DeleteUser(scope.row)" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-row type="flex" justify="end">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pages.page"
                    :page-size="pages.size"
                    :total="pages.total"
                    @current-change="handlePageChange"
                ></el-pagination>
            </el-row>
            <!-- 创建用户弹出框 -->
            <el-dialog title="创建用户数据" :visible.sync="creatVisible" width="50%" center>
                <el-form :model="AddForm" ref="AddForm" label-width="150px">
                    <el-col :span="12">
                        <el-form-item label="部门名称">
                            <el-cascader
                                ref="cascaderAddr"
                                placeholder="搜索或选择部门名称"
                                :options="options"
                                :props="{ expandTrigger: 'hover', label: 'companyname', value: 'companycode' }"
                                @change="handleAreaChange"
                                :show-all-levels="false"
                                filterable
                            ></el-cascader>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="姓名">
                            <el-input v-model="AddForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="性别">
                            <el-select v-model="AddForm.x3" placeholder="请选择性别">
                                <el-option label="男" value="2"></el-option>
                                <el-option label="女" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="民族">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="员工编号">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="creatVisible = false">取 消</el-button>

                    <el-button type="primary" @click="CreatOneUser">创 建</el-button>
                </span>
            </el-dialog>

            <!-- 编辑用户弹出框 -->
            <el-dialog title="编辑用户数据" :visible.sync="editVisible" width="40%" center>
                <el-form :model="EditForm" ref="EditForm" label-width="120px">
                    <el-col :span="12">
                        <el-form-item label="公司名称">
                            <el-cascader
                                ref="cascaderAddr"
                                :placeholder="EditForm.companyname"
                                :options="options"
                                :props="{ expandTrigger: 'hover', label: 'companyname', value: 'companycode' }"
                                @change="handleAreaChange"
                                :show-all-levels="false"
                                filterable
                            ></el-cascader>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="姓名">
                            <el-input v-model="EditForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="性别">
                            <el-select v-model="AddForm.x3" placeholder="请选择性别">
                                <el-option label="男" value="2"></el-option>
                                <el-option label="女" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="民族">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="员工编号">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button
                        @click="
                            editVisible = false;
                            GetAllUserData();
                        "
                        >取 消</el-button
                    >

                    <el-button type="primary" @click="EditOneUser">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 注册用户弹出框 -->
            <el-dialog title="注册用户数据" :visible.sync="registerVisible" width="40%" center>
                <el-form :model="registerForm" ref="registerForm" label-width="120px">
                    <el-col :span="12">
                        <el-form-item label="用户名">
                            <el-input v-model="registerForm.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="密码">
                            <el-input v-model="registerForm.password"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="请选择角色">
                            <el-select v-model="registerForm.roleName" style="width: 100%">
                                <el-option v-for="item in UserList" :key="item" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="12">
                        <el-form-item label="性别">
                            <el-select v-model="AddForm.x3" placeholder="请选择性别">
                                <el-option label="男" value="2"></el-option>
                                <el-option label="女" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="民族">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="员工编号">
                            <el-input v-model="AddForm.x2"></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button
                        @click="
                            registerVisible = false;
                            GetAllUserData();
                        "
                        >取 消</el-button
                    >

                    <el-button type="primary" @click="RegisterUser">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import {
    GetUserData,
    GetAllCompany,
    CreatUser,
    DeleteUser,
    EditUser,
    LogoutUser,
    GetUserList,
    RegisterUser
} from '../../../api/module/systemManagement/UserManagement';
export default {
    data() {
        return {
            UserList: [],
            creatVisible: false,
            editVisible: false,
            registerVisible: false,
            SexOptions: ['男', '女'],
            registerForm: {},
            AddForm: {},
            EditForm: {},
            pages: {
                page: 1,
                size: 10,
                total: 3
            },
            options: [],
            tableData: [],
            searchModel: {},

            //最初查询所有用户，不过滤公司和名字
            search: { companyName: null, name: null }
        };
    },
    created() {
        this.GetAllUserData();
        this.GetAllCompany();
        this.GetUserList();

        this.test1();
    },
    methods: {
        test() {
            function B() {
                console.log('Hello Closure!');
            }
            return B;
        },
        test1() {
            var X = this.test();
            console.log(X);
        },

        //按条件查询用户
        FindUser() {
            console.log(this.options);
            console.log(this.searchModel);
            GetUserData(this.pages.page, this.pages.size, this.searchModel)
                .then((res) => {
                    console.log('条件查询用户接口成功');
                    this.$message.success('查询成功！');
                    this.tableData = res.data.records;
                    this.pages.size = res.data.size;
                    this.pages.total = res.data.total;
                    console.log(res);
                })
                .catch((err) => {
                    console.log('条件查询用户接口失败');
                    console.log(err);
                });
        },
        //查询所有用户
        GetAllUserData() {
            GetUserData(this.pages.page, this.pages.size, this.search)
                .then((res) => {
                    this.tableData = res.data.records;
                    this.pages.size = res.data.size;
                    this.pages.total = res.data.total;
                })
                .catch((err) => {
                    console.log('查询所有用户接口失败');
                    console.log(err);
                });
        },
        //创建用户
        CreatOneUser() {
            console.log(this.AddForm);
            CreatUser(this.AddForm)
                .then((res) => {
                    this.$message.success('创建成功！');
                    this.creatVisible = false;
                    this.GetAllUserData();
                    console.log('创建用户接口成功');
                })
                .catch((err) => {
                    console.log('创建用户接口失败');
                });
        },
        EditOneUser() {
            EditUser(this.EditForm)
                .then((res) => {
                    this.$message.success('编辑成功！');
                    this.editVisible = false;
                    console.log('编辑用户接口成功');
                })
                .catch((err) => {
                    console.log('编辑用户接口失败');
                });
        },

        //删除用户
        DeleteUser(row) {
            console.log(row);
            this.$confirm('确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    DeleteUser(row.employeeid)
                        .then((res) => {
                            this.$message.success('删除成功！');
                            this.GetAllUserData();
                            console.log('删除用户接口成功');
                        })
                        .catch((err) => {
                            console.log('删除用户接口失败');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },

        //注销用户
        LogoutUser(row) {
            console.log(row);
            this.$confirm('确认注销?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    LogoutUser(row.employeeid)
                        .then((res) => {
                            this.$message.success('注销成功！');
                            this.GetAllUserData();
                            console.log('注销接口成功');
                        })
                        .catch((err) => {
                            console.log('注销接口失败');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消注销'
                    });
                });
        },
        //注册用户
        RegisterUser() {
            if (this.registerForm.username == '' || this.registerForm.password == null) {
                this.$message.warning('请完善注册信息');
            } else {
                RegisterUser(this.registerForm.employeeid, this.registerForm)
                    .then((res) => {
                        this.$message.success('注册成功！');
                        this.registerVisible = false;
                    })
                    .catch((err) => {
                        this.$message.warning('请选择角色！');
                    });
            }
        },
        //将所有公司没有children的数组设置为null
        Change(options) {
            options.forEach((element) => {
                if (element.children.length == 0) {
                    element.children = null;
                } else {
                    this.Change(element.children);
                }
            });
        },

        //获取所有公司数据
        GetAllCompany() {
            GetAllCompany()
                .then((res) => {
                    for (let i in res.data) {
                        this.options.push(res.data[i]);
                    }
                    this.Change(this.options);
                })
                .catch((err) => {
                    console.log('查询所有公司接口失败');
                    console.log(err);
                });
        },

        GetUserList() {
            GetUserList()
                .then((res) => {
                    console.log(res);
                    this.UserList = res.data;
                })
                .catch((err) => {
                    console.log('获取角色列表接口失败');
                });
        },
        handlePageChange(page) {
            console.log(page);
            this.pages.page = page;
            this.GetAllUserData();
        },
        FindForm() {},
        CreatButton() {
            this.creatVisible = true;
        },
        EditButton(row) {
            this.editVisible = true;
            this.EditForm = row;
        },
        registerButton(row) {
            this.registerVisible = true;
            this.registerForm = row;
            console.log(row);
        },
        //选择栏获取label
        handleAreaChange(val) {
            console.log(val);
            this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels;
            let i = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels.length - 1;
            let label = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels[i];
            this.searchModel.companyName = label;
            this.AddForm.companyname = label;
            this.EditForm.companyname = label;
        }
    }
};
</script>

<style >
.c1 {
    margin-left: 5px;
    color: rgb(96, 98, 102);
}
</style>